<template>
	<view>
		<cu-custom :key="'header'+headerKey" bgColor="bg-gradual-orange"  :isBack="true"  backText="返回" title="选择器"></cu-custom>
		<view class="margin-top-sm">
			<view class="cu-bar bg-white " >
				<view class="action" style="font-size: 32rpx;font-weight:bold;" >
					<text>特殊定制选择器</text>
				</view>
			</view>
			<zh-country
				label="国家/地区"
				labelWidth="200rpx"
				labelAlign="left"
				placeholder="请选择国家/地区"
				ref='countrySelect'
				addressRef="countrySelect"
				v-model="country"
				rightIconClass="text-gray"
				@selectChange="countryChange"
			>
			</zh-country>
			<zh-address
				label="省市县街道"
				labelWidth="200rpx"
				labelAlign="left"
				placeholder="请选择省市区"
				ref='addressSelect'
				addressRef="addressSelect"
				:value="addressValue"
				rightIconClass="text-gray"
				@addressChange="successSelectAddress"
			>
			</zh-address>
		</view>
		<view class="margin-top-sm">
			<view class="cu-bar bg-white " >
				<view class="action" style="font-size: 32rpx;font-weight:bold;" >
					<text>单选</text>
				</view>
			</view>
			<zh-picker
				pickerRef="sex"
				label="性别"
				labelAlign="left"
				mode="selector"
				:options="sexData"
				rightIconClass="text-gray"
				:value="sex"
				placeholder="请选择性别"
				themeColor="#FC7983"
				@pickerChange="onSexChange($event)"
				ref="sex"
			></zh-picker>
			<zh-picker
				pickerRef="nation"
				label="后台数据字典"
				labelAlign="left"
				mode="selector"
				:options="dictData.nation"
				rightIconClass="text-gray"
				:value="nation"
				placeholder="请选择民族"
				themeColor="#FC7983"
				@pickerChange="onNationChange($event)"
				ref="nation"
			></zh-picker>
		</view>
		<view class="margin-top-sm">
			<view class="cu-bar bg-white " >
				<view class="action" style="font-size: 32rpx;font-weight:bold;" >
					<text>可搜索单选和多选下拉框</text>
				</view>
			</view>
			<zh-select
				label="多选"
				labelAlign="left"
				inputAlign="right"
				selectType="multiple"
				labelWidth="200rpx"
				:options="selectData"
				rightIconClass="text-gray"
				v-model="sex1"
				placeholder="请选择"
				themeColor="#FC7983"
				@selectChange="onSexChange($event)"
				ref="sex1"
			></zh-select>
			<zh-select
				label="单选"
				labelAlign="left"
				inputAlign="right"
				selectType="single"
				:options="selectData"
				rightIconClass="text-gray"
				v-model="sex2"
				placeholder="请选择"
				themeColor="#FC7983"
				@selectChange="onSexChange($event)"
				ref="sex2"
			></zh-select>
			
		</view>
		<view class="margin-top-sm">
			<view class="cu-bar bg-white " >
				<view class="action" style="font-size: 32rpx;font-weight:bold;" >
					<text>日期选择器</text>
				</view>
			</view>
			<zh-picker
				pickerRef="date2"
				mode="date"
				startYear="1920" 
				label="年"
				themeColor="#FC7983"
				labelAlign="left"
				rightIconClass="text-gray"
				inputAlign="right"
				:value="date2"
				fields="year"
				ref="date2"
				@pickerChange="onDateChange($event)"
			></zh-picker>
			<zh-picker
				pickerRef="date3"
				mode="date"
				startYear="1920" 
				label="年月"
				themeColor="#FC7983"
				labelAlign="left"
				rightIconClass="text-gray"
				inputAlign="right"
				:value="date3"
				fields="month"
				ref="date3"
				@pickerChange="onDateChange($event)"
			></zh-picker>
			<zh-picker
				pickerRef="date1"
				mode="date"
				startYear="1920" 
				label="年月日"
				themeColor="#FC7983"
				labelAlign="left"
				rightIconClass="text-gray"
				inputAlign="right"
				:value="date1"
				:current="true"
				fields="day"
				ref="date1"
				@pickerChange="onDateChange($event)"
			></zh-picker>
			<zh-picker
				pickerRef="date4"
				mode="date"
				startYear="1920" 
				label="日期到小时"
				themeColor="#FC7983"
				labelAlign="left"
				rightIconClass="text-gray"
				inputAlign="right"
				:value="date4"
				fields="hour"
				ref="date4"
				@pickerChange="onDateChange($event)"
			></zh-picker>
			<zh-picker
				pickerRef="date5"
				mode="date"
				startYear="1920" 
				label="日期到分钟"
				themeColor="#FC7983"
				labelAlign="left"
				rightIconClass="text-gray"
				inputAlign="right"
				:value="date5"
				fields="minute"
				ref="date5"
				@pickerChange="onDateChange($event)"
			></zh-picker>
			<zh-picker
				pickerRef="date6"
				mode="date"
				startYear="1920" 
				label="日期到秒"
				themeColor="#FC7983"
				labelAlign="left"
				rightIconClass="text-gray"
				inputAlign="right"
				:value="date6"
				fields="second"
				ref="date6"
				@pickerChange="onDateChange($event)"
			></zh-picker>
			<zh-picker
				pickerRef="date7"
				mode="half"
				startYear="1990" 
				endYear="2030"
				label="上下午"
				themeColor="#FC7983"
				labelAlign="left"
				rightIconClass="text-gray"
				inputAlign="right"
				:value="date7"
				ref="date7"
				@pickerChange="onDateChange($event)"
			></zh-picker>
			<zh-picker
				pickerRef="date8"
				mode="range"
				startYear="1990" 
				endYear="2030"
				label="时间段"
				themeColor="#FC7983"
				labelAlign="left"
				rightIconClass="text-gray"
				inputAlign="right"
				:value="date8"
				ref="date8"
				@pickerChange="onDateChange($event)"
			></zh-picker>
		</view>
		<view class="margin-top-sm">
			<view class="cu-bar bg-white " >
				<view class="action" style="font-size: 32rpx;font-weight:bold;" >
					<text>时间选择器</text>
				</view>
			</view>
			<zh-picker
				pickerRef="time1"
				mode="time"
				label="时分"
				themeColor="#FC7983"
				labelAlign="left"
				rightIconClass="text-gray"
				inputAlign="right"
				:value="time1"
				fields="minute"
				ref="time1"
				:current="true"
				:second="false"
				@pickerChange="onDateChange($event)"
			></zh-picker>
			<zh-picker
				pickerRef="time2"
				mode="time"
				label="时分秒"
				themeColor="#FC7983"
				labelAlign="left"
				rightIconClass="text-gray"
				inputAlign="right"
				:value="time2"
				fields="minute"
				ref="time2"
				:current="true"
				:second="true"
				@pickerChange="onDateChange($event)"
			></zh-picker>
		</view>
		<view class="margin-top-sm">
			<view class="cu-bar bg-white " >
				<view class="action" style="font-size: 32rpx;font-weight:bold;" >
					<text>多级联动</text>
				</view>
			</view>
			<zh-picker
				pickerRef="linkage1"
				label="两级联动"
				labelAlign="left"
				inputAlign="right"
				mode="linkage"
				:options="data5List"
				rightIconClass="text-gray"
				:value="data5"
				level="2"
				default-type="dictKey"
				:default-props="{label:'dictValue',value:'dictKey',children:'children'}"
				placeholder="请选择"
				themeColor="#FC7983"
				@pickerChange="onLinkageChange($event)"
				ref="linkag1"
			></zh-picker>
			<zh-picker
				pickerRef="linkage2"
				label="三级联动(最高4级)"
				labelAlign="left"
				inputAlign="right"
				mode="linkage"
				:options="data6List"
				rightIconClass="text-gray"
				:value="data6"
				level="3"
				placeholder="请选择"
				themeColor="#FC7983"
				@pickerChange="onLinkageChange($event)"
				ref="linkag2"
			></zh-picker>
		</view>
	</view>
</template>

<script>
	import commonApi from '@/api/system/common.js'
	export default {
		onShow() {
			this.headerKey += 1;
		},
		data() {
			return {
				headerKey:0,
				country:'',
				addressValue:[],
				sexData: [{ dictKey: '1', dictValue: '男' },
						  { dictKey: '2', dictValue: '女' }],
				dictData:{},
				date1:'',
				sex1:[],
				sex2:'',
				sex3:'',
				selectData: [{ dictKey: '1', dictValue: '男' },
						  { dictKey: '2', dictValue: '女' },
						  { dictKey: '3', dictValue: '对接我额无偶入围' },
						  { dictKey: '4', dictValue: '飞机偶尔我入味儿' },
						   { dictKey: '5', dictValue: '额偶然' },
						   { dictKey: '6', dictValue: '女' },
						   { dictKey: '7', dictValue: '对接我额无偶入围' },
						   { dictKey: '8', dictValue: '飞机偶尔我入味儿' },
						    { dictKey: '9', dictValue: '额偶然' }],
				nation:'',
				sex:'',
				date2:'',
				date3:'',
				date4:'',
				date5:'',
				date6:'',
				date7:'',
				date8:'',
				time1:'',
				time2:'',
				data5:[],
				data6:'',
				data7:'',
				data5List:[{ dictKey: '1', dictValue: '动物',children:[{ dictKey: '11', dictValue: '狗'},{ dictKey: '12', dictValue: '猫'}] },
						  { dictKey: '2', dictValue: '植物' ,children:[{ dictKey: '21', dictValue: '花'},{ dictKey: '22', dictValue: '草'}]}],
				data6List:[{ dictKey: '1', dictValue: '家电',children:[{ dictKey: '11', dictValue: '大家电',children:[{ dictKey: '111', dictValue: '空调'},{ dictKey: '121', dictValue: '冰箱'}]},{ dictKey: '12', dictValue: '小家电',children:[{ dictKey: '112', dictValue: '豆浆机'},{ dictKey: '122', dictValue: '电水壶'}]}] },
						  { dictKey: '2', dictValue: '服装' ,children:[{ dictKey: '21', dictValue: '衣服',children:[{ dictKey: '211', dictValue: '长袖'},{ dictKey: '221', dictValue: '短袖'}]},{ dictKey: '22', dictValue: '裤子',children:[{ dictKey: '211', dictValue: '9分裤'},{ dictKey: '221', dictValue: '七分裤'}]}]}]		  
			}
		},
		onReady() {
			// 数据字典初始化
			const data = {}
			data.dictFields = 'nation'
			this.$http.post(commonApi.getDictBatch, data).then(res => {
				this.dictData = res.result
			}).catch(error => {
					
			})
		},
		methods: {
			countryChange(e){
				//this.country = e.result
				console.log("国家代码："+e.result)
				console.log("国家名称："+e.value)
			},
			successSelectAddress(data){
				if(data){
					console.log("省编码："+ data.province.value)
					console.log("省中文："+ data.province.label)
					if(data.city.label){
						console.log("市编码："+ data.city.value)
						console.log("市中文："+ data.city.label)
					}
					if(data.county.label){
						console.log("县编码："+ data.county.value)
						console.log("县中文："+ data.county.label)
					}
					if(data.town.label){
						console.log("街道乡镇编码："+ data.town.value)
						console.log("街道乡镇中文："+ data.town.label)
					}
				}
			},
			onSexChange(e){
				//this.sex = e.value;
				console.log(e)
			},
			onNationChange(e){
				this.nation = e.value;
			},
			onDateChange(e){
				console.log(e)
			},
			onLinkageChange(e){
				console.log(e)
			}
		}
	}
</script>

<style>

</style>
